<template>
	<view class="main">
		<view class="status_bar">
			<!-- 这里是状态栏 -->
		</view>
		<view class="header">
			<view class="title">运输车辆工作统计</view>
			<image class="rl-icon" src="../../static/rl.png" mode="aspectFit" @click="selectRQ"></image>
			<view>{{date}}</view>
		</view>
		<view class="container">
			<view class="column-text">
				<text style="float: left;">车辆编号</text>
				<text style="float: right;">运输统计</text>
			</view>
			<uni-list class="data-list">
				<uni-list-item v-for="o in dataList" :key="o.CLBH" :title="o.CLBH" :rightText="o.C+''"
				showArrow :to="`/pages/info/info?bh=${o.BH}&date=${date}`" ></uni-list-item>
			</uni-list>
		</view>
		<view class="footer">
			共计：<text class="num">{{count}}</text>趟
		</view>
		<uni-calendar ref="calendar" :date="date" :insert="false" @confirm="confirm"></uni-calendar>
		<!-- #ifdef APP-PLUS -->
		<luo-version-upgrade v-if="upgrade.version" :version="upgrade.version" :url="upgrade.url" :describe="upgrade.note"></luo-version-upgrade> 
		<!-- #endif -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				date: this.$moment().format('YYYY-MM-DD'),
				dataList: []
			}
		},
		computed: {
			count() {
				let c = 0;
				this.dataList.forEach(e => {
					c += e.C
				})
				return c;
			},
			upgrade() {
				return this.$store.state.checkupdate;
			}
		},
		methods: {
			loadData(callback) {
				uni.request({
					url: 'https://www.kongke15888.com/api/faka/count',
					data: {
						date: this.date
					},
					success: (res) => {
						let d = res.data;
						if (d.resultCode == 0) {
							this.dataList = d.record
						} else {
							this.dataList = []
						}
					},
					complete: () => {
						if(callback && typeof callback === 'function') {
							callback();
						}
					}
				})
			},
			selectRQ() {
				this.$refs.calendar.open();
			},
			confirm(e) {
				this.date = e.fulldate;
				this.loadData();
			},
		},
		mounted() {
			this.loadData()
		},
		onPullDownRefresh() {
			this.loadData(()=>{
				uni.stopPullDownRefresh();
			})
		}
	}
</script>

<style lang="scss" scoped>
	/* 	.main::after {
		content: '';
		background-image: url('/static/a.jpg');
		background-position: 0 -64px;
		opacity: 0.5;
		top: 0;
		left: 0;
		bottom: 0;
		right: 0;
		position: absolute;
		z-index: -1;
	} */

	.status_bar {
		height: var(--status-bar-height);
		width: 100%;
		background-color: #323a4d;
	}

	.header {
		position: relative;
		background-color: #323a4d;
		text-align: center;
		color: #FFFFFF;
		height: 190rpx;
		line-height: 92rpx;
		font-size: 28rpx;
	}

	.rl-icon {
		height: 48rpx;
		width: 48rpx;
		float: right;
		right: 28rpx;
		top: 28rpx;
		position: absolute;
	}

	.column-text {
		background-color: #f8f8f8;
		height: 100rpx;
		font-size: 28rpx;
		line-height: 100rpx;
		padding: 0 36rpx;
	}

	.data-list {
		padding: 0 20rpx;
	}

	.footer {
		text-align: right;
		margin-right: 30rpx;
		margin-top: 30rpx;
		margin-bottom: 30rpx;
		font-size: 32rpx;
		.num {
			color: #F0AD4E;
			padding: 0 10rpx;
		}
	}
</style>
